<template>
  <div>
    <el-tabs v-model.sync="activeTabName" class="container" @tab-click="handleClick">
      <el-tab-pane v-for="item in tabList" :key="item.name" :label="item.label" :name="item.name" />
    </el-tabs>
  </div>

</template>

<script>
  export default {
    name: 'YesTabs',
    props: {
      tabList: {
        type: Array,
        default: () => []
      },
      active: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        // activeTabName: this.active
      }
    },
    watch: {
      active(val) {
        this.activeTabName = val
      }
    },
    computed: {
      activeTabName: {
        get() {
          let locTabs = this.getLoc('hisTabs')
          console.log('locTabs', locTabs)
          this.active = this.$route.query && this.$route.query.tab ? this.$route.query.tab : locTabs ? locTabs : this
            .active ? this.active : this.tabList[0].name

          return this.active
        },
        set(val) {
          // this.activeTabName = val
          this.$route.query.tab = val
          // this.setLoc('hisTabs',val)
          this.$emit('update:active', val)
        }
      },
    },
    mounted() {
      console.log('active:', this.active, this.tabList)
    },
    methods: {
      handleClick(tab, event) {
        //this.$router.push(`${this.$route.fullPath}?tab=${tab.name}`)
        this.$emit('tab-click', tab, event)
      }
    }
  }
</script>

<style scoped>
  .container {
    width: 100%;
    background-color: #fff;
    padding: 0 40px;
  }
</style>
